/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect} from 'react';
import {DeviceEventEmitter} from 'react-native';
import {
  Text,
  View,
  Colors,
  TouchableOpacity,
  Card,
  Button,
} from 'react-native-ui-lib';
import * as Progress from 'react-native-progress';
import Clipboard from '@react-native-clipboard/clipboard';
import Octicons from 'react-native-vector-icons/Octicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import AntDesign from 'react-native-vector-icons/AntDesign';
import TagList from '../TagList';
import Action from '../Action';
import {update} from '@/utils/request';

let CardItem = ({
  item,
  navigation,
  refreshAsync,
  head,
  stepList,
  setAction,
}) => {
  return (
    <Card
      key={item?.id}
      flex
      enableShadow={false}
      padding-12
      marginH-12
      marginT-12
      containerStyle={{
        backgroundColor: Colors.colorBgSecondary,
      }}
      onPress={() => {
        navigation.navigate('DetailPage', {
          id: item.id,
          missionName: item.missionName,
        });
      }}>
      <View center row style={{gap: 8}}>
        <Progress.Circle
          size={24}
          progress={item?.progress / 100}
          color={Colors.primaryColor}
          showsText={false}
          textStyle={{
            fontSize: 8,
          }}
        />

        <View flex-1 centerV row style={{gap: 8}}>
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('toast', {
                message: item.missionNo + '已复制！',
                type: 'success',
              });
              Clipboard.setString(item.missionNo);
            }}>
            <Text body style={{color: Colors.colorTextBase}}>
              {item.missionNo}
            </Text>
          </TouchableOpacity>
          <Text
            style={{fontWeight: 'bold', color: Colors.colorTextBase, flex: 1}}
            body
            numberOfLines={1}>
            {item.projectName}
          </Text>
          {item.type === 2 && (
            <FontAwesome name={'bug'} size={18} color={Colors.$iconDanger} />
          )}
          {head && (
            <Button
              style={{
                width: 30,
                height: 30,
                padding: 0,
              }}
              center
              round
              onPress={() => {
                setAction(s => ({
                  ...s,
                  visible: true,
                  options: stepList
                    ?.filter(it => it?.value !== item?.stepId)
                    ?.map(it => ({
                      label: it?.label,
                      onPress: async () => {
                        let res = await update('/item/moveStep/' + item?.id, {
                          stepId: it?.value,
                        });
                        if (res.code === 0) {
                          refreshAsync();
                        }
                      },
                    })),
                }));
              }}
              backgroundColor={Colors.primaryColor}>
              <AntDesign name={'export'} size={16} color={Colors.white} />
            </Button>
          )}
        </View>
      </View>
      <View marginT-10 style={{gap: 8}}>
        <Text body style={{fontWeight: 'bold', color: Colors.colorTextBase}}>
          {item.missionName}
        </Text>
        {!item?.actualTime && !item?.planTime ? null : (
          <View row left centerV>
            <Text
              body
              style={{
                color:
                  !item?.planTime || item?.actualTime < item?.planTime
                    ? Colors.colorTextBase
                    : Colors.primaryColor,
              }}>
              消耗 {item?.actualTime ?? '0'} 小时
            </Text>
            <View width={1} height={12} bg-grey40 marginH-6 marginT-2 />
            <Text body>计划{item?.planTime ?? '-'}小时</Text>
          </View>
        )}
      </View>

      {item?.itemTagList?.length > 0 && <TagList item={item} limit={3} />}

      <Action item={item} refreshAsync={refreshAsync} head={head} />
    </Card>
  );
};

export default CardItem;
